<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>Simple app</title>
<script type="text/javascript" src="js/libs/angular.js"></script>
<script type="text/javascript" src="js/libs/controllers/app1.js"></script>
</head>
<body>
	<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
		<fieldset>
			<legend>Signup</legend>
			<div class="row">
				<div class="large-12 columns">
					<label>Your name</label> 
					<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required>
				</div>
				<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
					<small class="error" ng-show="signup_form.name.$error.required">Your name is required.</small> 
					<small class="error" ng-show="signup_form.name.$error.minlength"> Your name is required to be at least 3 characters.</small> 
					<small class="error" ng-show="signup_form.name.$error.maxlength"> Your name cannot be longer than 20 characters.</small>
				</div>
				<div class="row">
					<div class="large-12 columns">
						<label>Your email</label> 
						<input type="email" placeholder="Email" name="email" ng-model="signup.email" ng-minlength="3" ng-maxlength="20" required>
					</div>
					<div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
						<small class="error" ng-show="signup_form.email.$error.required">Your name is required.</small> 
						<small class="error" ng-show="signup_form.email.$error.minlength">Your email is required to be at least 3 characters.</small> 
						<small class="error" ng-show="signup_form.email.$error.maxlength">Your email cannot be longer than 20 characters.</small>
					</div>
				</div>

				<div class="row">
					<div class="large-12 columns">
						<label>Username</label> 
						<input type="text" placeholder="Designed username" name="username" ng-model="signup.username" ng-minlength="3" ng-maxlength="20" ensure-unique="username" required>
					</div>
					<div class="error" ng-show="signup_form.username.$dirty && signup_form.username.$invalid">
						<small class="error" ng-show="signup_form.username.$error.required">Your name is required.</small> 
						<small class="error" ng-show="signup_form.username.$error.minlength">Your username is required to be at least 3 characters.</small> 
						<small class="error" ng-show="signup_form.username.$error.maxlength">Your username cannot be longer than 20 characters.</small> 
						<small class="error" ng-show="signup_form.username.$error.unique">That username is taken, please try another.</small>
					</div>
				</div>
			</div>
			<button type="submit" ng-disabled="signup_form.$invalid" class="button radius">Submit</button>
		</fieldset>

	</form>

</body>
</html>